<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Vue入门</title>
	<script type="text/javascript" src="js/vue.js" ></script>
</head>
</head>
<body>
	<!--挂载点，模板，实例之间的关系-->
	<div id="root">
	  <h1 v-on:click="change">{{msg}}</h1>
	  <h1 @click="change">{{msg}}</h1>
	  <h1>{{number}}</h1>
	  <h1 v-text="number"></h1>
	  <h1 v-html="number"></h1>
	  <div v-text="content"></div>
	  <div v-html="content"></div>
	  <div v-on:click="handleClick">{{content}}</div>
	  <div v-bind:title="title">
	  	titles
	  </div>
	  <input type="" name="" id="" v-model="content" /><br />
	  {{content}}
	  <div v-html="content"></div>
	    姓：<input v-model="firstname" />
	    名：<input v-model="lastname" />
	  <div>{{fullname}}</div>
	  <div>{{count}}</div>
	  <div v-show="show">点我</div>
	  <div @click="touchMe">toggle</div>
	  <ul>
	  	<li v-for="item of list">{{item}}</li>
	  </ul>
	</div>
	<script type="text/javascript">
		new Vue({
			el:"#root",
			data: {
				msg: "Hello World",
				number:123,
				content:"<h1>Hello Vue</h1>",
				title: "Hello title",
				firstname: "",
				lastname: "",
				count: 0,
				show: false,
				list: [1, 1, 3]
			},
			methods: {
				handleClick:function() {
					alert(123);
				},
				change:function() {
					this.msg = "Hello Msg";
				},
				touchMe: function() {
					this.show = !this.show
				}
			},
			computed: {
			    fullname: function() {
			    	return this.firstname + " " + this.lastname;
			    }
			},
			watch: {
				fullname: function() {
					this.count++
				}
			}
		})
	</script>
</body>
</html>
